<template>
  <div class="square" :style="style"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const props = defineProps({
  size: {
    type: Number,
    required: true
  },
  color: {
    type: String,
    required: true
  }
})

const style = ref({
  width: props.size + "px",
  height: props.size + "px",
  backgroundColor: props.color
})
</script>

<style scoped lang="scss">
.square {
  border-radius: 5px;
}
</style>
